//package com.example.compose
//
//import android.graphics.Path
//import android.view.animation.PathInterpolator
//import androidx.activity.compose.BackHandler
//import androidx.compose.animation.AnimatedContent
//import androidx.compose.animation.ExperimentalSharedTransitionApi
//import androidx.compose.animation.SharedTransitionLayout
//import androidx.compose.animation.core.Easing
//import androidx.compose.animation.core.animateDp
//import androidx.compose.animation.core.tween
//import androidx.compose.animation.core.updateTransition
//import androidx.compose.animation.fadeIn
//import androidx.compose.animation.fadeOut
//import androidx.compose.animation.slideInVertically
//import androidx.compose.animation.togetherWith
//import androidx.compose.foundation.background
//import androidx.compose.foundation.clickable
//import androidx.compose.foundation.layout.Arrangement
//import androidx.compose.foundation.layout.Box
//import androidx.compose.foundation.layout.PaddingValues
//import androidx.compose.foundation.layout.WindowInsets
//import androidx.compose.foundation.layout.fillMaxSize
//import androidx.compose.foundation.layout.fillMaxWidth
//import androidx.compose.foundation.layout.height
//import androidx.compose.foundation.layout.padding
//import androidx.compose.foundation.layout.statusBars
//import androidx.compose.foundation.layout.windowInsetsPadding
//import androidx.compose.foundation.lazy.grid.GridCells
//import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
//import androidx.compose.foundation.lazy.grid.items
//import androidx.compose.foundation.shape.RoundedCornerShape
//import androidx.compose.material3.Text
//import androidx.compose.runtime.Composable
//import androidx.compose.runtime.MutableState
//import androidx.compose.runtime.getValue
//import androidx.compose.runtime.mutableStateOf
//import androidx.compose.runtime.remember
//import androidx.compose.runtime.setValue
//import androidx.compose.ui.Alignment
//import androidx.compose.ui.Modifier
//import androidx.compose.ui.draw.clip
//import androidx.compose.ui.graphics.Color
//import androidx.compose.ui.tooling.preview.Preview
//import androidx.compose.ui.unit.dp
//import androidx.compose.ui.unit.sp
//
//
//data class ColorItemState(
//    val id: Int,
//    val color: Color,
//    val name: String
//)
//
//val CoolColors = listOf(
//    ColorItemState(
//        id = 1,
//        color = Color(0xFFD12020),
//        name = "Red"
//    ),
//    ColorItemState(
//        id = 2,
//        color = Color(0xFFFFEA00),
//        name = "Yellow"
//    ),
//    ColorItemState(
//        id = 3,
//        color = Color(0xFF00B0FF),
//        name = "Blue"
//    ),
//    ColorItemState(
//        id = 4,
//        color = Color(0xFF00E676),
//        name = "Green"
//    ),
//    ColorItemState(
//        id = 5,
//        color = Color(0xFFF78484),
//        name = "Purple"
//    )
//)
//
//data class ContainerTransformState(
//    val selectedItemId: Int? = null,
//    val colors: List<ColorItemState> = emptyList()
//) {
//    val selectedItem = colors.find { it.id == selectedItemId }
//}
//
//@Composable
//fun rememberContainerTransformState(colors: List<ColorItemState>): MutableState<ContainerTransformState> {
//    return remember {
//        mutableStateOf(ContainerTransformState(colors = colors))
//    }
//}
//
//@Preview
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Composable
//fun ContainerTransformExample() {
//    var state by rememberContainerTransformState(colors = CoolColors)
//    val transition = updateTransition(targetState = state.selectedItem, label = "")
//    SharedTransitionLayout(modifier = Modifier.fillMaxSize()) {
//        transition.AnimatedContent(
//            transitionSpec = {
//                fadeIn(
//                    animationSpec = tween(
//                        durationMillis = DURATION_EXTRA_LONG,
//                        easing = EmphasizedEasing
//                    )
//                ).togetherWith(
//                    fadeOut(
//                        animationSpec = tween(
//                            durationMillis = DURATION_EXTRA_LONG,
//                            easing = EmphasizedEasing
//                        )
//                    )
//                )
//            }
//        ) { selectItem ->
//            when (selectItem) {
//                null -> {
//                    LazyVerticalGrid(
//                        modifier = Modifier
//                            .fillMaxSize()
//                            .windowInsetsPadding(WindowInsets.statusBars),
//                        columns = GridCells.Fixed(2),
//                        contentPadding = PaddingValues(4.dp),
//                        verticalArrangement = Arrangement.spacedBy(4.dp),
//                        horizontalArrangement = Arrangement.spacedBy(4.dp)
//                    ) {
//                        items(state.colors, key = { it.id }) { item ->
//                            val cornerSize by transition.animateDp(
//                                transitionSpec = {
//                                    tween(
//                                        durationMillis = DURATION_EXTRA_LONG,
//                                        easing = EmphasizedEasing
//                                    )
//                                },
//                                label = ""
//                            ) { selectItem ->
//                                when (selectItem) {
//                                    item -> 0.dp
//                                    else -> 16.dp
//                                }
//                            }
//                            Box(
//                                modifier = Modifier
//                                    .sharedElement(
//                                        state = rememberSharedContentState(key = item.id),
//                                        animatedVisibilityScope = this@AnimatedContent,
//                                        boundsTransform = { _, _ ->
//                                            tween(
//                                                durationMillis = DURATION_EXTRA_LONG,
//                                                easing = EmphasizedEasing
//                                            )
//                                        }
//                                    )
//                                    .fillMaxWidth()
//                                    .height(250.dp)
//                                    .clip(RoundedCornerShape(cornerSize))
//                                    .background(color = item.color)
//                                    .clickable {
//                                        state = state.copy(
//                                            selectedItemId = item.id
//                                        )
//                                    }
//                                    .padding(8.dp)
//                            ) {
//                                Text(
//                                    modifier = Modifier
//                                        .align(Alignment.BottomCenter)
//                                        .renderInSharedTransitionScopeOverlay(renderInOverlay = { item.id == state.selectedItemId })
//                                        .animateEnterExit(
//                                            enter = fadeIn(tween(delayMillis = 200)) + slideInVertically(
//                                                animationSpec = tween(delayMillis = 200),
//                                                initialOffsetY = { it / 2 })
//                                        ),
//                                    text = item.name,
//                                    fontSize = 18.sp,
//                                    color = Color.White
//                                )
//                            }
//                        }
//                    }
//                }
//
//                else -> {
//                    BackHandler {
//                        state = state.copy(selectedItemId = null)
//                    }
//                    val cornerSize by transition.animateDp(
//                        transitionSpec = {
//                            tween(durationMillis = DURATION_EXTRA_LONG, easing = EmphasizedEasing)
//                        },
//                        label = ""
//                    ) {
//                        when (it) {
//                            null -> 16.dp
//                            else -> 0.dp
//                        }
//                    }
//                    Box(
//                        modifier = Modifier
//                            .sharedElement(
//                                state = rememberSharedContentState(key = selectItem.id),
//                                animatedVisibilityScope = this@AnimatedContent,
//                                boundsTransform = { _, _ ->
//                                    tween(
//                                        durationMillis = DURATION_EXTRA_LONG,
//                                        easing = EmphasizedEasing
//                                    )
//                                }
//                            )
//                            .fillMaxSize()
//                            .clip(RoundedCornerShape(cornerSize))
//                            .background(color = selectItem.color)
//                            .windowInsetsPadding(WindowInsets.statusBars)
//                    ) {
//
//                    }
//                }
//            }
//        }
//    }
//}
//
//
//const val DURATION_EXTRA_LONG = 1000
//
//private val emphasizedPath = Path().apply {
//    moveTo(0f, 0f)
//    cubicTo(0.05f, 0f, 0.133333f, 0.06f, 0.166666f, 0.04f)
//    cubicTo(0.208333f, 0.82f, 0.25f, 1f, 1f, 1f)
//}
//
//val emphasized = PathInterpolator(emphasizedPath)
//val EmphasizedEasing = Easing { emphasized.getInterpolation(it) }
//
